<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "添加物品"
  }
}
</route>

<script lang="ts" setup>
const emit = defineEmits(['closeDialog'])

const form = reactive({
  name: '',
  location: '',
  fileList: [],
  note: '',
  category: '',
})
const fileList = ref<any[]>([
  {
    url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg',
  },
])

const action: string = 'https://ukw0y1.laf.run/upload'
const columns = ref(['卧室衣柜', '书房抽屉', '玄关鞋柜'])
const categoryColumns = ref(['证件', '衣物', '鞋包'])

function handCancel() {
  emit('closeDialog')
}
function handSave() {
  console.log('🚀 ~ handSave ~ form:', form)
  emit('closeDialog')
}
</script>

<template>
  <view class="h-full flex flex-col bg-white p-4 pt-6 text-slate-800">
    <view class="mb-6 flex items-center justify-between">
      <view class="text-lg text-slate-600" @click="handCancel">
        取消
      </view>
      <view class="text-2xl font-bold">
        添加新物品
      </view>
      <view class="text-lg text-sky-500 font-bold" @click="handSave">
        保存
      </view>
    </view>
    <view class="flex-grow space-y-5">
      <view
        class="w-full border-2 border-slate-300 rounded-xl border-dashed bg-slate-50 p-5"
      >
        <wd-upload :file-list="fileList" image-mode="aspectFill" :action="action" :auto-upload="false" />
      </view>
      <view>
        <view class="mb-1 block text-slate-600 font-semibold">
          物品名称
        </view>
        <wd-input
          v-model="form.name"
          type="text"
          placeholder="例如：冬季大衣、护照" class="border border-slate-300 rounded-lg border-solid bg-white px-4 py-2"
        />
      </view>
      <view>
        <view class="mb-1 block text-slate-600 font-semibold">
          存放位置
        </view>
        <wd-picker v-model="form.location" :columns="columns" class="border border-slate-300 rounded-lg border-solid bg-white px-4 py-1" />
      </view>
      <view>
        <view class="mb-1 block text-slate-600 font-semibold">
          分类标签
        </view>
        <wd-picker v-model="form.category" :columns="categoryColumns" class="border border-slate-300 rounded-lg border-solid bg-white px-4 py-1" />
      </view>
      <view>
        <label class="mb-1 block text-slate-600 font-semibold">备注信息 (可选)</label>
        <wd-textarea
          v-model="form.note"
          placeholder="例如：放在最上层，蓝色收纳盒里" rows="3"
          class="w-full border border-slate-300 rounded-lg border-solid bg-white px-4 py-3"
        />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.wd-upload__preview {
  width: 96px;
  height: 92px;
}
</style>
